
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<html>
<head>
    <title>城建</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
    <link rel="stylesheet" href="/js/workflow/work/swiper-4.1.0.min.css">
    <link rel="stylesheet" href="/css/screen.css"  media="screen" title="no title" >
    <script type="text/javascript" src="/js/jquery/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="/js/workflow/work/swiper-4.1.0.min.js"></script>
    <script src="/lib/Highcharts-5.0.14/code/highcharts.js"></script>
    <script src="/lib/Highcharts-5.0.14/code/modules/data.js"></script>
    <script src="/lib/Highcharts-5.0.14/code/modules/drilldown.js"></script>
    <script src="/js/modernizr.js"></script>
    <script src="../js/jquery/jquery.cookie.js"></script>
    <%--<script src="/js/street/checkRank.js"></script>--%>
    <style>
        html,body{
            height:100%;
            width:100%;
            overflow: hidden;
        }
        body{
            margin:0px;
        }
        .header{
            width:100%;
            overflow: hidden;
        }
        .sky{
            float:left;
            margin:30px 0px 0px 40px;
        }
        .headRight{
            float:right;
            margin:32px 40px 0px 0px;
        }
        .date{
            width:100%;
            text-align: center;
            color:red;
            font-weight: bold;
            margin-top: -77px;
        }
        .time{
            font-size:30px;
        }
        .mon{
            font-size:24px;
        }
        .date p{
            margin:0px;
        }
        .date{
            color:#fff;
        }
        .date .mon{
            font-size: 24px;
        }
        .date .time{
            font-size:38px;
        }
        .title{
            text-align: center;
            margin-top:60px;
            margin-left: 500px
        }
        .section{
            width:811px;
            height:480px;
            margin: 50px 40% 0px;
        }
        .section ul{
            width:630px;
            height:440px;
            overflow: hidden;
            float:left;
            list-style:none;
            margin:0px;
            padding:0px;
        }
        .section ul li{
            float:left;
            margin-right:10px;
        }
        .section ul li a{
            display: inline-block;
            width:100%;
            height:164px;
        }
        ul li img{
            width: 200px;
            height: 200px;
        }
        .zuih{
            width:181px;
            height:413px
        }
        .work{
            float:right;
        }

        @media screen and (max-width: 1366px) {
            ul li img{
                width: 150px;
                height: 150px;
            }
            .section{
                width:635px;
                height:280px;
                margin: 10px 38% 0px;
            }
            .tie{
                width: 600px;
            }
            .section ul{
                width:480px;
                height:340px;
                overflow: hidden;
                float:left;
                list-style:none;
                margin:0px;
                padding:0px;
            }
            .zuih{
                width:155px;
                height:325px
            }
            .title{
                margin-top: 10px;
            }
            .stepRight{
                margin-top:60px!important;
                padding:20px 10px 0px!important;
            }
            .step2,.step4{
                margin: 70px auto 0px!important;
            }
            .stepLeft{
                height: 30%!important;
                margin-top: 10px!important;
            }
            .stepRight ul,.step3 ul{
                height:30px!important;
                line-height: 30px!important;
            }
            .tab2{
                margin-top:20px!important;
            }
            .step3{
                margin:75px auto 0px!important;
            }
            #bing{
                height:calc(100% - 10px)!important;
            }
            .stepText4{
                line-height: 25px!important;
                margin-top:12px!important;
                font-size:14px!important;
            }
            .left2{
                width:60%!important;
                /*margin-left: -35px!important;*/
            }
            .right2{
                width:40%!important;
            }
        }
        .work a{
            display: inline-block;
            width:100%;
            height:340px;
        }
        @media screen and (min-width: 700px) and (max-width: 1100px) {
            .title{
                margin-top: 10px;
            }
            .section{
                margin-top: 20px;
            }

        }

        .fan {
            background: orangered;
            width: 120px;
            height: 42px;
            position: absolute;
            right: 27px;
            top: 12px;
            text-align: center;
            line-height: 42px;
            border-radius: 6px;
            font-size: 16px;
            color: #fff;
        }
        /****************轮播图css*****************************/
        .swiper-container {
            width: 100%;
            height: 100%;
        }
        .swiper-slide img.swiperone{
            position: absolute;
            top:0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index:1;
        }

        .swiper-slide img.swipertwo{
            position: absolute;
            top:23px;
            left: 38px;
            right: 0;
            bottom: 0;
            z-index:2;
        }

        .content{
            position: relative;
            height:100%;
            width:100%;
            background: url('/img/workflow/work/bac.jpg') no-repeat;
            background-size:100% 100% ;

        }
        .centernox{
            position: absolute;
            width:62%;
            height: 74%;
            top:13%;
            left:19%;
        }
        .fxBtn{
            position: absolute;
            width: 80px;
            height:80px;
            border-radius: 100%;
        }
        .leftbtn{
            left:-100px;
        }
        .rightbtn{
            right:-100px;
        }
        .swiper-button-prev{
            display: none;
        }
        .swiper-button-next{
            display: none;
        }
        .swiper-slide1{
            width: 100%;
            height:100%;
        }
        .content{
            background: url('/img/workflow/work/chengjianbg.jpg') no-repeat
        }
        .dangjianjinru{
            position: fixed;
            bottom:36px;
            z-index: 999;
            width:246px;
            height: 74px;
            left: 50%;
            margin-left: -123px;
            cursor: pointer;
        }
        .centernox{
            top:8%;
        }
        .host{
            position: fixed;
            top:17px;
            right: 27px;
            padding:5px 20px;
            background: green;
            color: #fff;
            z-index:999;
            border-radius: 6px;
        }
        a{
            text-decoration: none;
        }
        .step2{
            width:80%;
            height:80%;
            margin:60px auto 0px;
        }
        .stepLeft{
            width:100%;
            /*float:left;*/
            height:35%;
            margin-top:20px;
            background: #fff;
            border-radius: 6px;
            border:1px solid #f6f6f6;
            padding:20px 10px;
        }
        .stepLeft table{
            width:100%;
            height:100%;
            border-collapse: collapse;
        }
        .stepLeft table td, .stepLeft table th{
            border:2px solid #12a412;
            text-align: center;
        }
        .stepLeft table th{
            background: #15b815;
            height:30px;
            line-height: 30px;
        }
        .stepRight{
            width:100%;
            /*float:right;*/
            height:45%;
            margin-top:60px;
            background: #fff;
            border-radius: 6px;
            border:1px solid #f6f6f6;
            padding:20px 10px;
        }
        .stepRight ul{
            width:100%;
            height:40px;
            line-height: 40px;
            padding-left:0px;
            margin:0px;
            border:1px solid #00b0f0;
            border-radius: 3px;
        }
        .tab2{
            width:80%;
            height:40px;
            line-height: 40px;
            padding-left:0px;
            margin:0px auto 0px;
            border:1px solid #00b0f0;
            border-radius: 3px;
        }
        .tab2 li{
            width:33.333%;
            text-align: center;
            list-style: none;
            float:left;
        }

        #bing{
            height:calc(100% - 20px)
        }
        .stepRight ul li{
            width:33.333%;
            text-align: center;
            list-style: none;
            float:left;
            /*border:*/
        }
        .step4{
            width:83%;
            height:80%;
            margin:60px auto 0px;
        }
        .stepText4{
            width:100%;
            margin-top:20px;
            font-size:16px;
            line-height: 32px;
            font-weight:1000;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
            -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
            -webkit-line-clamp: 7; /** 显示的行数 **/
            overflow: hidden;  /** 隐藏超出的内容 **/
            text-indent: 2em;
        }
        .select{
            background: #00b0f0;
            border-radius: 3px;
        }
        .back{
            background: url('/img/chengjian/backss.png') no-repeat;
            -webkit-background-size: 100% 100%;
            background-size: 100% 100% ;
        }
        #container{
            border-radius: 5px;
            overflow: hidden;
        }
        /*#container #highcharts-wisd53p-0{*/
            /*border-radius: 6px!important;*/
        /*}*/
        #highcharts-tiraz4d-0,#container2{
            height:100%;
        }
        .tab li:hover,.tab2 li:hover{
            cursor:pointer
        }
        .color{
            color:#fff;
        }
        .fxBtn:hover{
            cursor:pointer;
        }
        .step3{
            margin:60px auto 0px;
            width:92%;
            height:80%;
            background: #fff;
            border-radius: 3px;
            overflow: hidden;
        }
        .left2{
            width:50%;
            float:left;
            height:50%;
            margin-top:50px;
        }
        .right2{
            width:50%;
            float:left;
            height:50%;
            margin-top:50px;
        }
        #containerLeft,#containerRight{
            width:100%;height:100%;
        }
        .form{
            position: absolute;
            right: -2%;
            top: -8%;
            width: 253px;
        }
        .pic{
            float: left;
        }
        table {
            /*padding: 40px 0;*/
            width: 100%;
            /*height: 20%;*/
        }
        td{

            padding:12px 0px;
            padding-left: 2%;
        }
        .cont{
            font-size: 24px;
            /*line-height: 59px;*/
        }
        .rit{
            /*float: right;*/
            margin-top: 9px;
        }
        .step1{
            width:80%;
            height:80%;
            background: #fff;
            margin:60px auto;
        }
        .title1{
            font-size:24px;
            padding:20px;
        }
        .detail{
            position:absolute;
            left: 0px;
            top: 0px;
            line-height: 27px;
        }
        /*ul li{*/
            /*width:90%;*/
            /*list-style: none;*/
            /*line-height: 50px;*/
            /*border-bottom: 1px solid #eee;*/
        /*}*/
        .left{
            width:40px;
            height:50px;
            float:left;
            line-height: 50px;
            text-align: center;
        }
        .right{
            width:calc(100% - 60px);
            float:left;
            /*height:100%;*/
            position: relative;
        }
        .out{
            width:100%;
            height:10px;
            border-radius: 20px;
            background: #d0edfa;
            margin-top:30px;
            overflow: hidden;
        }
        .in{
            display: inline-block;
            height:100%;
            background: #17aee6;
            border-radius: 20px;
        }
        .userList{
            width:100%;
            height:80%;
            overflow: auto;
        }
        .userList li{
            list-style: none;
            width: 100%;
            height: 58px;
        }
        .left img{
            width:25px;
            height:40px;
        }
        .name{
            font-size:16px;
        }
        .num{
            font-size:18px;
            font-weight: bold;
            padding-left:20px;
            color: #d3b548;
        }
        .ranking{
            width:30px;
            height:30px;
            text-align: center;
            line-height: 30px;
            font-size: 16px;
            margin-top:10px;
            border-radius: 50%;
            display: inline-block;
            background: #d0edfa;
            color:#17aee6;
        }
    </style>

</head>
<body>
<%--<img src="/img/workflow/work/chengjian/chengjianjinru.png" class="dangjianjinru" alt="">--%>
<%--<a href="/CommunityLxdwxxcj/shiyuan?type=1" class="host">返回首页</a>--%>
<%--<section class="form">--%>
    <%--<form>--%>
        <%--<fieldset class="radio-container">--%>
            <%--<div class="radio-options">--%>
                <%--<div id="idx"class="toggle">返回首页</div>--%>
                <%--<ul>--%>
                    <%--<li>--%>
                        <%--<input type="radio" name="my-beer" id="choice1" value="choice1">--%>
                        <%--<label for="choice1"> 安全首页</label>--%>
                    <%--</li>--%>

                    <%--<li>--%>
                        <%--<input type="radio" name="my-beer" id="choice3" value="choice3">--%>
                        <%--<label for="choice3"> 党建首页</label>--%>
                    <%--</li>--%>
                    <%--<li>--%>
                        <%--<input type="radio" name="my-beer" id="choice4" value="choice4">--%>
                        <%--<label for="choice4"> 综治首页</label>--%>
                    <%--</li>--%>
                    <%--<li>--%>
                        <%--<input type="radio" name="my-beer" id="choice5" value="choice5">--%>
                        <%--<label for="choice5"> 进入系统</label>--%>
                    <%--</li>--%>
                <%--</ul>--%>
            <%--</div>--%>
        <%--</fieldset>--%>
    <%--</form>--%>

<%--</section>--%>
<div class="content">
    <div class="centernox">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide back">
                    <%--<img class="swiper-slide1 swiperone" src="/img/workflow/work/chengjian/chengjianpageone.png" alt="">--%>
                    <div class="step1">
                        <div class="title1">网格员巡检排行榜</div>
                        <ul class="userList" >

                        </ul>
                        <div class="noD" style="text-align: center;margin-top: 30px;display: none">
                            <img src="/img/main_img/shouyekong.png" alt="" style="display:  inline-block;width: 140px;">
                            <span style="display: block;padding-top: 10px;">暂无数据</span>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide back">

                    <div class="step2">
                        <div class="stepRight">
                            <ul class="tab">
                                <li class="select color">今日</li>
                                <li>本周</li>
                                <li>本月</li>

                            </ul>
                            <div id="bing">
                                <div id="container2" style="heihgt:50%">

                                </div>
                            </div>
                        </div>
                        <div class="stepLeft">
                            <table>
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th>今日</th>
                                        <th>本周</th>
                                        <th>本月</th>
                                    </tr>
                                </thead>
                                <tbody class="leftList">
                                 <%--<tr>--%>
                                                                            <%--<td>巡检数量</td>--%>
                                                                           <%--<td>200</td>--%>
                                                                            <%--<td>1051</td>--%>
                                                                            <%--<td>3980</td>--%>
                                                                       <%--</tr>--%>
                                                                    <%--<tr>--%>
                                                                            <%--<td>事件数量</td>--%>
                                                                            <%--<td>13</td>--%>
                                                                            <%--<td>26</td>--%>
                                                                            <%--<td>47</td>--%>
                                                                        <%--</tr>--%>
                                                                    <%--<tr>--%>
                                                                            <%--<td>派发数量</td>--%>
                                                                           <%--<td>11</td>--%>
                                                                            <%--<td>19</td>--%>
                                                                            <%--<td>29</td>--%>
                                                                        <%--</tr>--%>
                                </tbody>
                            </table>
                        </div>

                    </div>

                </div>
                <div class="swiper-slide back">
                    <div class="step4">
                        <table >
                            <tr>
                                <td>
                                    <div class="pic">
                                        <div style="margin-top: 11px;margin-right: 50px;width: 25px;height:25px;border-radius: 4px;background-color:#ef563d"></div>
                                    </div>
                                    <div class="rit"><span class="cont">重大隐患 <span id="zdyh" class="number">0</span> 起</span>
                                    </div>
                                </td>
                                <td>
                                    <div class="pic">
                                        <div style="margin-top: 11px;margin-right: 50px;margin-right: 50px;width: 25px;height:25px;border-radius: 4px;background-color:#f2ce2f"></div>
                                    </div>
                                    <div class="rit"><span class="cont">突出隐患 <span id="tcyh" class="number">0</span> 起</span>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="pic">
                                        <div style="margin-top: 11px;margin-right: 50px;width: 25px;height:25px;border-radius: 4px;background-color:#1e9de0"></div>
                                    </div>
                                    <div class="rit"><span class="cont">一般隐患 <span id="ybyh" class="number">0</span> 起</span>
                                    </div>
                                </td>
                                <td>
                                    <div class="pic">
                                        <div style="margin-top: 11px;margin-right: 50px;width: 25px;height:25px;border-radius: 4px;background-color:rgb(80, 180, 50)"></div>
                                    </div>
                                    <div class="rit"><span class="cont">合格达标 <span id="hgdb" class="number">0</span> 起</span>
                                    </div>
                                </td>
                            </tr>
                        </table>
                        <div id="container" style="width:100%;height: 50%;margin-top:30px;">

                        </div>
                        <div style="width: 100%;text-align: center;padding: 10px 0;    padding-bottom: 100px;">
                            <div style="float: left;width: 25%;font-weight: bold">合格达标</div>
                            <div style="float: left;width: 25%;font-weight: bold">一般隐患</div>
                            <div style="float: left;width: 25%;font-weight: bold">突出隐患</div>
                            <div style="float: left;width: 25%;font-weight: bold">重大隐患</div>
                        </div>

                    </div>
                </div>
                <div class="swiper-slide back">
                    <%--<img class="swiper-slide1 swiperone" src="/img/chengjian/three2.png" alt="" >--%>
                    <div class="step3">
                        <ul class="tab2" style="margin-top:50px;">
                            <li  data-type="1">今日</li>
                            <li data-type="2">本周</li>
                            <li class="select color" data-type="3">本月</li>
                        </ul>
                        <div class="top" style="margin-top:0px;width:100%">
                            <div class="left2">
                                <div id="containerLeft"></div>
                            </div>
                            <div class="right2">
                                <div id="containerRight"></div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>

            <!-- 如果需要滚动条 -->
            <div class="swiper-scrollbar"></div>
        </div>
        <img class="fxBtn leftbtn" src="/img/workflow/work/chengjianleft.png" alt="" onclick="leftclick($(this))">
        <img class="fxBtn rightbtn" src="/img/workflow/work/chengjianright.png" alt="" onclick="rightclick($(this))">
    </div>

</div>
</body>
<script>
    //    $(document).click(function () {
    //        window.location.href = '/CommunityLxdwxxcj/zhuye';
    //    })
    <%--获取当前时间--%>

</script>

<script>

    $('.dangjianjinru').click(function () {
        window.location.href='/loginsyController/loginmh4'
    });
    $('#idx').click(function () {
        window.location.href='/CommunityLxdwxxcj/shiyuan?type=1'
    });

    $('#choice1').click(function () {
        window.location.href='/CommunityLxdwxxcj/newAnquan'
    });
    $('#choice2').click(function () {
        window.location.href='/CommunityLxdwxxcj/newchengjian'
    });
    $('#choice3').click(function () {
        window.location.href='/CommunityLxdwxxcj/newdangjian'
    });
    $('#choice4').click(function () {
        window.location.href='/CommunityLxdwxxcj/newZongzhi'
    });
    $('#choice5').click(function () {
        $.cookie('menuId','000' , { expires: 7 , path: '/' });
//        parent.window.pause()
        window.location.href='/main'
        event.stopPropagation();
    });


    function rank(type,timeType,startTime,endTime){
        $.ajax({
            url:'/gridCheck/checkRank',
            type:'get',
            data:{rankType:type,timeType:timeType,startTime:startTime,endTime:endTime},
            dataType:'json',
            success:function(res){
                var data=res.data;
                var str=""

                if(type==1&&data.length<=0){
                    $('.noD').show();
                    $('.userList').hide();
//                    $.layerMsg({content:'网格排行榜暂无数据',icon:6})
                }else if(type==2&&data.length<=0){
                    $('.noD').show();
                    $('.userList').hide();
//                    $.layerMsg({content:'网格员排行榜暂无数据',icon:6})
                }else{
                    $('.noD').hide();
                    $('.userList').show();
                }




                for(var i=0;i<data.length;i++){
                    str +='  <li id="'+function(){
                            if(type==1){
                                return data[i].gridId
                            }else {
                                return data[i].userId
                            }
                        }()+'"  data-type="'+function(){
                            if(type==1){
                                return 'grid'
                            }else{
                                return 'user'
                            }
                        }()+'">' +
                        '                    <div class="left">'+function(){
                            if(i==0){
                                return '<span><img src="/img/attend/jin.png" alt=""></span>'
                            }else if(i==1){
                                return '<span><img src="/img/attend/yin.png" alt=""></span>'
                            }else if(i==2){
                                return '<span><img src="/img/attend/tong.png" alt=""></span>'
                            }else{
                                return '<span class="ranking">'+(i+1)+'</span>'
                            }
                        }()+'</div>' +
                        '                    <div class="right">' +
                        '                        <div class="out">' +
                        '                            <span class="in" style="width:'+function(){
                            if(i==0){
                                return '100%'
                            }else{
                                var num=(data[i].num/data[0].num)*100;
                                return num+'%';
                            }
                        }()+'"></span>' +
                        '                        </div>' +
                        '                        <div class="detail">' +
                        '                            <span class="name">'+function(){
                            if(type==1){
                                return data[i].gridName
                            }else{
                                return data[i].userName
                            }
                        }()+'</span>' +
                        '                            <span class="num">'+data[i].num+'</span>' +
                        '                        </div>' +
                        '                    </div>' +
                        '                </li>'
                }
                if(type==1){
                    $('.communityList').html(str);
                }else{
                    $('.userList').html(str);
                }

            }
        })
    }
    rank(1,'month','','')
    rank(2,'month','','')

//    if($('.userList').html()==""){
//        $('.noD').show();
//    }else{
//        $('.noD').hide();
//    }


    var swiper = new Swiper('.swiper-container', {
        slidesPerView: 1,
        spaceBetween: 30,
        loop: true,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });
    function leftclick(e){
        $('.swiper-button-prev').click();
    }
    function rightclick(e){
        $('.swiper-button-next').click();
       if($('.swiper-slide-active').attr('data-swiper-slide-index') == 3){

           $('.swiper-slide').eq(0).find('#containerLeft').removeAttr('id').parent().siblings().find('#containerRight').removeAttr('id');
           four(3);
           four2(3);
       }
    }
    $(function () {
        var height = $('.centernox').height()-80;
        height = height/2;
        $('.fxBtn').css('top',height+'px');
    })

    $.ajax({
        url: '/fixForm/selectTypeCount',
        type:'get',
        dataType:'json',
        success:function(res){
            var datas= res.data
            $('#zdyh').html(datas.typeCount4)
            $('#ybyh').html(datas.typeCount2)
            $('#tcyh').html(datas.typeCount3)
            $('#hgdb').html(datas.typeCount1)
            Highcharts.chart('container', {
                chart: {
                    type: 'column'
                },
                xAxis: {
                    categories: [ '合格达标','一般隐患', '突出隐患','重大隐患'],
                    labels:{
                        enabled:false
                    }
                },
                yAxis: {
                    gridLineWidth: 0,
                    labels:{
                        enabled:false
                    },
                    title: {
                        text: ''                // y 轴标题
                    }
                },

                plotOptions: {
                    series: {
                        pointPadding: 0.35,
                        groupPadding: 0,
                        borderWidth: 0,
                        shadow: false,
                        events:{
                            click:function(e){
                                var u = navigator.userAgent;
                                var safe=""

                                if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手机
                                    window.Android.Safe(e.point.id)
                                } else if (u.indexOf('iPhone') > -1) {//苹果手机
                                    safe=e.point.id
                                    window.Safe(safe)
                                } else if (u.indexOf('Windows Phone') > -1) {//winphone手机
                                    safe=e.point.id
                                    window.Safe(safe)
                                }

                            }
                        }
                    },
                    column: {
                        colorByPoint:true
                    },

                },
                tooltip: {
                    valueSuffix: ''
                },
                credits: {
                    enabled: false
                },
                legend: {
                    enabled: false
                },
                exporting: {
                    enabled: false
                },
                title: {
                    text:null,
                },

                series: [{
                    data: [{id:2,y:Number(datas.typeCount1),name:'合格达标'},{id:1,y:Number(datas.typeCount2),name:'一般隐患'},{id:4,y:Number(datas.typeCount3),name:'突出隐患'}, {id:3,y:Number(datas.typeCount4),name:'重大隐患'} ],
                    colors: [ '#50B432','#058DC7', '#DDDF00' ,'#ED561B']
                }]
            });
        }
    })
//    第四张巡检统计
    function typeajax(type,startTime,endTime,fn) {
        $.ajax({
            type : 'get',
            url : '/gridCheck/checkUpdateStatistics',
            dataType : 'json',
            data : {
                timeType:type,
//                queryType:grid,
                startTime:startTime,
                endTime:endTime
            },
            success : function(json) {
                var rsp=json.datas;
                var arrs=[];
                var arrsTwo=[];
                for(var i=0;i<rsp.length;i++){
                    var obj={};
                    obj.name=rsp[i].name;
                    obj.id=rsp[i].name;
                    obj.data=[];
                    var objTwo={};
                    objTwo.name=rsp[i].name;
                    objTwo.drilldown=rsp[i].name;
                    objTwo.id=rsp[i].id
                    objTwo.y=rsp[i].y;
                    objTwo.indexs=i+1;
                    arrsTwo.push(objTwo)
                    for(var m=0;m<rsp[i].data.length;m++){
                        var arrData=[];
                        arrData.push(rsp[i].data[m].name)
                        arrData.push(rsp[i].data[m].y)
                        arrData.push(rsp[i].id)
                        arrData.push(indexs=i+1);
                        obj.data.push(arrData);
                    }
                    arrs.push(obj)

                }
                // Create the chart
                fn(arrsTwo,arrs,type)
            }
        });
    }
//    typeajax("","","",function (arrs,arrsTwo,type) {
//        Highcharts.chart('container', {
//            credits: {
//                enabled:false
//            },
//            chart: {
//                type: 'column'
//            },
//            title: {
//                text: '巡检次数'
//            },
//            credits: {
//                enabled: false
//            },
//            subtitle: {
//                text: '点击可查看详细信息'
//            },
//            xAxis: {
//                type: 'category'
//            },
//            yAxis: {
//                title: {
//                    text: '巡检次数'
//                }
//            },
//            legend: {
//                enabled: false
//            },
//            plotOptions: {
//                series: {
//                    borderWidth: 0,
//                    dataLabels: {
//                        enabled: true,
//                        format: '{point.y}'
//                    },
////                    events:{
////                        click:function(e){
////                            if(e.point.options.drilldown==undefined){
////                                $('.cont').show();
////                                $('#container').hide();
////                                $('#ulactive').hide();
////                                ajaxPageLe.data.userName=e.point.options.name;
////                                ajaxPageLe.page()
////                            }
////                        }
////                    }
//                }
//            },
//            tooltip: {
//                headerFormat:
//                    '<span style="font-size:11px">{series.name}</span><br>',
//                pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b><br/>'
//            },
//            series: [{
//                name: '巡检次数',
//                colorByPoint: true,
//                data: arrs
//            }],
//            drilldown: {
//                series:arrsTwo
//            }
//        });
//    })


//    巡检统计表格 第二张
    function checkSis(fn){
        $.ajax({
            url:'/gridCheck/checkEvent',
            type:'get',
            dataType:'json',
            success:function(res){
                var data=res.object;
                var str=""
                str=' <tr>' +
                    '                                        <td>巡检数量</td>' +
                    '                                        <td>'+data.jinrInspection+'</td>' +
                    '                                        <td>'+data.weekInspection+'</td>' +
                    '                                        <td>'+data.monthInspection+'</td>' +
                    '                                    </tr>' +
                    '                                    <tr>' +
                    '                                        <td>事件数量</td>' +
                    '                                        <td>'+data.jinrEvent+'</td>' +
                    '                                        <td>'+data.weekEvent+'</td>' +
                    '                                        <td>'+data.monthEvent+'</td>' +
                    '                                    </tr>'
//                    '                                    <tr>' +
//                    '                                        <td>派发数量</td>' +
//                    '                                        <td>'+data.jinrEventXiafa+'</td>' +
//                    '                                        <td>'+data.weekEventXiafa+'</td>' +
//                    '                                        <td>'+data.monthEventXiafa+'</td>' +
//                    '                                    </tr>'
                $('.leftList').html(str)

                var day=[
                    {name:'巡检统计',y:data.jinrInspection},//data.jinrInspection
//                    {name:'派发统计',y:data.jinrEventXiafa},//data.jinrEventXiafa
                    {name:'事件统计',y:data.jinrEvent},//data.jinrEvent
                ]
//                {'巡检数量':data.jinrInspection,'事件数量':data.jinrEvent,'派发数量':data.jinrEventXiafa};
                var week= [
                    {name:'巡检统计',y:data.weekInspection},//data.weekInspection
//                    {name:'派发统计',y:data.weekEventXiafa},//data.weekEventXiafa
                    {name:'事件统计',y:data.weekEvent},//data.weekEvent
                ]

                var month=[
                    {name:'巡检统计',y:data.monthInspection},//data.monthInspection
//                    {name:'派发统计',y:data.monthEventXiafa},//data.monthEventXiafa
                    {name:'事件统计',y:data.monthEvent},//data.monthEvent
                ]
                $('.tab li').eq(0).attr('data',day)
                $('.tab li').eq(1).attr('data',week)
                $('.tab li').eq(2).attr('data',month)
                if(day[0].y==0 && day[1].y==0 ){
                    noDate('container2');
                }else{
                    char(day)
                }
//                charLeft(day);
//                charRight(day);
                //    第二张tab 切换
                $('.tab li').click(function(){
                    var data=$(this).attr('data');
                    $(this).addClass('select').siblings().removeClass('select')
                    $(this).addClass('color').siblings().removeClass('color')
                    var i=$(this).index();
                    if(i==0){
                        pie(day,'container2')
                    }else if(i==1){
                        pie(week,'container2')
                    }else{
                        pie(month,'container2')
                    }

                })
            }
        })
    }
    checkSis()

    function pie(type,id){
        if(type[0].y==0 && type[1].y==0 && type[2].y==0){
            noDate(id);
        }else{
            char(type)
        }
    }



    function char(type){
        Highcharts.chart('container2', {
            chart: {
                type: 'pie'
            },
            title: {
                text: ''
            },
            legend: {
                enabled:true,
                align: "center", //程度标的目标地位
        verticalAlign: "bottom", //垂直标的目标地位
//        x: 0， //间隔x轴的间隔
//        y: 100 //间隔Y轴的间隔
            },
            options3d:{
                enabled:true,
                alpha:45,
                beta:0
            },
            exporting:{
                enabled:false
            },
            credits: {
                enabled:false
            },
            plotOptions: {
                pie:{
                    allowPointSelect:true,
                    cursor:'pointer',
                    depth:35,
                    dataLabels:{
                        enabled:true,
                        formatter: function() {
                            if (this.percentage > 0){
                                return '<b>' + this.point.name + '</b>: ' + this.point.percentage.toFixed(1) + ' %'; // 这里进行判断
                            }else{

                            }
                        },
//                        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                        connectorWidth:1,
                        distance:5
                    },
                    showInLegend:true
                },

            },
            tooltip: {
                headerFormat:
                    '<span style="font-size:11px">{point.name}</span><br>',
                pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.percentage:.1f}%</b><br/>'
            },
            series: [{
                name: '统计',
                type:'pie',
                colorByPoint: true,
                data:type
            }]
        });
    }

    function four(typeDate){
        $.ajax({
            url:'/gridCheck/checkUpdateStatistics',
            data:{time:typeDate,queryType:2},
            type:'get',
            dataType:'json',
            success:function(res){
                if(res.datas[0].y==0 && res.datas[1].y==0 ){
                    noDate('containerLeft');
                }else{
                    charLeft(res.datas)
                }
            }
        })
    }
    four(3)

//    第四张统计图
    function charLeft(data){
        Highcharts.chart('containerLeft', {
            chart: {
                type: 'pie',
                backgroundColor: 'rgba(0,0,0,0)'
            },
            title: {
                text: ''
            },
            legend: {
//                layout: 'vertical',
                align: 'center',
                x: 15,
                verticalAlign: 'bottom',
                y: 25,
                floating: true,
            },
            options3d:{
                enabled:true,
                alpha:45,
                beta:0
            },
            exporting:{
                enabled:false
            },
            credits: {
                enabled:false
            },
            plotOptions: {
                pie:{
                    innerSize:'30',
                    allowPointSelect:true,
                    cursor:'pointer',
                    depth:35,
                    dataLabels:{
                        enabled:true,
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                        connectorWidth:1,
                        distance:5
                    },
                    showInLegend:true
                },

            },
            tooltip: {
                headerFormat:
                    '<span style="font-size:11px">{point.name}</span><br>',
                pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.percentage:.1f}%</b><br/>'
            },
            series: [{
                name: '统计',
                type:'pie',
                colorByPoint: true,
                data:data,
                colors: ['#94d364', '#ffe2b5', '#00b3f1']
            }]
        });
    }
    function charRight(data){
        Highcharts.chart('containerRight', {
            chart: {
                type: 'pie',
                backgroundColor: 'rgba(0,0,0,0)'
            },
            title: {
                text: ''
            },
            legend: {
//                layout: 'vertical',
                align: 'right',
                x: -15,
                verticalAlign: 'bottom',
                y: 25,
                floating: true,
            },
            options3d:{
                enabled:true,
                alpha:45,
                beta:0
            },
            exporting:{
                enabled:false
            },
            credits: {
                enabled:false
            },
            plotOptions: {
                pie:{
                    allowPointSelect:true,
                    cursor:'pointer',
                    depth:35,
                    dataLabels:{
                        enabled:true,
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                        connectorWidth:1,
                        distance:5
                    },
                    showInLegend:true
                },

            },
            tooltip: {
                headerFormat:
                    '<span style="font-size:11px">{point.name}</span><br>',
                pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.percentage:.1f}%</b><br/>'
            },
            series: [{
                name: '统计',
                type:'pie',
                colorByPoint: true,
                data:data,
                colors: ['#1ab4fe', '#75d9d7', '#83cd52','#f1a265','#ff88c4']
            }]
        });
    }
    function four2(typeDate){
        $.ajax({
            url:'/gridEvent/getStatisticsByGridEventType',
            data:{typeDate:typeDate,queryType:2},
            type:'get',
            dataType:'json',
            success:function(res){
                if(res.datas[0].y==0 && res.datas[1].y==0 && res.datas[2].y==0 ){
                    noDate('containerRight');
                }else{
                    charRight(res.datas)
                }

            }
        })
    }
    four2(3)

    $('.tab2 li').click(function(){
        $(this).addClass('select').addClass('color').siblings().removeClass('select').removeClass('color')
        var index=$(this).attr('data-type');
        four(index);
        four2(index)
    })

    function noDate(id){
        Highcharts.chart(id, {
            chart: {
                type: 'pie'
            },
            title: {
                text: ''
            },
            legend: {
                enabled:true,
                align: "center", //程度标的目标地位
                verticalAlign: "bottom", //垂直标的目标地位
                y:25
            },
            exporting:{
                enabled:false
            },
            tooltip: {
                enabled:false
            },
            credits: {
                enabled:false
            },
            colors:[
                'gray'//第一个颜色，欢迎加入Highcharts学习交流群294191384
            ],
            plotOptions: {
                pie:{
                    innerSize:'30',
                    depth:35,
                    name:'暂无数据',
                    dataLabels:{
                        enabled:false
                    },
                    showInLegend:true
                },

            },
            series: [{
                type:'pie',
                data:[ {name:'暂无数据',y:1}]
            }]
        });
    }



</script>
</html>